<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <!-- <script src="https://unpkg.com/vue-baidu-map"></script>
     <script>
         Vue.use(VueBaiduMap.default, {
             ak: 'hlhRg9uSDWSceXHCC4RaRnEUWSH1Ylwa'
         })
     </script>-->
    <!--<style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:300px;width:300px;margin:20px;padding-right:40px; }
    </style>-->

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=hlhRg9uSDWSceXHCC4RaRnEUWSH1Ylwa">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
</head>

<body>
<div id="app">
    <div class="content-header">
        <h1>首页
            <small>公司分布图</small>
        </h1>
    </div>
    <div class="app-container">
        <template>
            <el-tabs v-model="activeName" type="card" @tab-click="checkActiveName">
                <el-tab-pane label="分布图" name="first">
                    <div>
                        <template>
                            <div id="all1">
                                <div id="allmap"></div>
                            </div>
                        </template>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="详细信息" name="second">
                    <div class="app-container">
                        <div>
                            <div class="filter-container">
                                <el-input placeholder="请输入地址" v-model="pagination.queryString" style="width: 200px;"
                                          class="filter-item" @keyup.enter.native="handleFilter"></el-input>
                                <el-button @click="findPage()" class="dalfBut">查询</el-button>
                                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                                <!--展示分页查询数据-->
                                <el-table size="small" current-row-key="id" :data="dataList" stripe
                                          highlight-current-row>
                                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                                    <el-table-column prop="address" label="公司地址" align="center"></el-table-column>
                                    <el-table-column prop="longitude" label="所在经度" align="center"></el-table-column>
                                    <el-table-column prop="latitude" label="所在纬度" align="center"></el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="pagination-container">
                                    <el-pagination
                                            class="pagiantion"
                                            @current-change="handleCurrentChange"
                                            :current-page="pagination.currentPage"
                                            :page-size="pagination.pageSize"
                                            layout="total, prev, pager, next, jumper"
                                            :total="pagination.total">
                                    </el-pagination>
                                </div>
                                <!-- 新增标签弹层 -->
                                <div class="add-form" style="z-index: 4000">
                                    <el-dialog title="新增地址" :visible.sync="dialogFormVisible">
                                        <template>
                                            <div id="all">
                                                <div>
                                                    <input type="text" id="suggestId" name="address" placeholder="请输入地址"
                                                           v-model="healthAddress">
                                                    &nbsp;&nbsp;
                                                    <el-button type="primary" id="butT" class="butT"
                                                               @click="handleAdd()">确定添加
                                                    </el-button>
                                                </div>
                                                <div id="allmap2"></div>
                                            </div>
                                        </template>
                                    </el-dialog>
                                </div>

                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>

</div>


<!--<script type="text/javascript">
    var map = new BMap.Map("container");
    // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别
</script>-->
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            activeName: "first",//主界面初始化展示菜单
            center: {lng: 114.311753, lat: 30.598604},//中心坐标
            objAddress: {//定义地址对象以便封装传入后台
                longitude: 114.311753,
                latitude: 30.598604,
                address: ""
            },
            healthAddress: "",
            allData: [],//地址列表展示
            dataList: [],//列表数据
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 10,
                total: 100,
                queryString: null,
            },
            dialogFormVisible: false,//新增对话框页面是否展示
            flag:false
        },
        methods: {
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            //分页查询
            findPage() {
                if(this.pagination.queryString == "" && this.pagination.currentPage > 1){
                    this.pagination.queryString = null;
                    this.pagination.currentPage = 1;
                }
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString,
                };
                axios.post("/address/findPage.do", param)
                    .then((res) => {
                        this.dataList = res.data.rows[0].rows;
                        this.pagination.total = res.data.total;
                        // this.pagination.currentPage=res.data.rows[0].currentPage;
                        if (this.pagination.queryString!=null && this.pagination.queryString.length!=0) {
                            this.pagination.currentPage=res.data.rows[1].currentPage;
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    })
             },

            //重置表单
            resetForm() {
                this.pagination.queryString = null;
                this.allData = [];
                this.healthAddress = "";
            },


            // 弹出添加窗口
            handleCreate() {
                //显示新建窗口
                this.dialogFormVisible = true;
                //添加地址前初始化对象objAdress方便后期校验
                this.objAddress.latitude = -1;
                this.objAddress.longitude = -1;
                //完成添加地址对象的封装
                this.showMap2("allmap2");
            },
            //标签页改变时触发内容
            checkActiveName() {
                if (this.activeName == "second") {
                    this.showMap2("allmap2");
                } else {
                    this.findPage();
                    this.showMap("allmap")
                }
            },

            //添加
            handleAdd() {
                if (this.objAddress.address != null && this.objAddress.latitude != -1 && this.objAddress.longitude != -1) {
                    axios.post("/address/add.do", this.objAddress)
                        .then((res) => {
                            if (res.data.flag) {

                                //添加地址成功
                                this.$message({
                                    showClose: true,
                                    type: "success",
                                    message: res.data.message
                                })
                                this.findPage();
                            } else {
                                this.$message({
                                    //添加地址失败
                                    showClose: true,
                                    type: "error",
                                    message: res.data.message
                                })
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        })
                        .finally(() => {

                            //关闭会话框
                            this.dialogFormVisible = false;
                            //重置检索框中内容，重新查询数据库
                            this.resetForm();
                            this.findPage();
                        })
                } else {
                    this.$message({
                        showClose: "true",
                        type: "error",
                        message: "地址有误！请重新选择要添加的地址坐标！"
                    })
                }

            },
            //删除地址
            handleDelete(row) {
                this.$confirm("您确定要删除该条数据吗？", "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"//确定消息类型
                    }).then(() => {
                    axios.get("/address/delete.do?id=" + row.id)
                        .then((res) => {
                            if (res.data.flag) {
                                this.findPage();
                                this.$message(
                                    {
                                        showClose: true,
                                        type: "success",
                                        message: res.data.message
                                    })
                                //分页校验
                                if (this.dataList.length <= 1) {
                                    //调用分页,获取最新分页数据
                                    if (this.pagination.currentPage > 1) {
                                        this.pagination.currentPage = this.pagination.currentPage - 1;
                                    }
                                }
                                this.findPage();
                            } else {
                                this.$message.error(
                                    {
                                        showClose: true,
                                        message: res.data.message,
                                        type: "error"
                                    });
                            }
                        })
                        .catch((e) => {
                            this.showMessage(e);
                        })
                }).catch((e) => {//取消删除后操作
                    this.$message({
                        showClose: true,
                        type: "info",
                        message: "取消删除操作!"
                    })
                }).finally(() => {//无论是否删除都要重新查询分页数据
                    this.findPage();
                })
            },
            //显示要添加的地址坐标，并将地址信息封装到objAddress对象中
            showMap2(mapContainer) {
                this.resetForm();
                var th = this;//获取当前Vue对象
                this.$nextTick(function () {
                    // 创建Map实例
                    var map = new BMap.Map(mapContainer);//创建地图对象
                    var point = new BMap.Point(th.center.lng, th.center.lat); // 初始化地图坐标，武汉市经纬度坐标
                    map.centerAndZoom(point, 15);//地图及其放大倍数
                    map.enableScrollWheelZoom();//可以滚动缩放地图
                    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象(即根据地图地址参数给出提示)
                        {
                            "input": "suggestId"
                            , "location": map
                        });
                    var myValue
                    /*  HTML的Dom方法
                        事件处理程序（addEventListener）
                        格式为：element.addEventListener(type, handle, false);
                        type: 事件触发类型，如click,keypress等等，下面我们详细的讲讲事件类型！！
                        handle:事件处理函数，事件出发后，定义可能发生的变化！！
                        false: 表示事件冒泡模型，一般来说都是false。* */
                    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表选定地址后触发事件
                        var _value = e.item.value;//远程查询地址信息封装返回e
                        //获取地址对象中的详细信息
                        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                        this.healthAddress = myValue;//封装到地址对象的address属性中
                        th.objAddress.address = myValue;
                        setPlace();
                    });

                    function setPlace() {
                        map.clearOverlays();//清除地图上所有覆盖物(内置方法)
                        function myFun() {
                            th.center = local.getResults().getPoi(0).point;//获取第一个智能搜索的结果
                            map.centerAndZoom(th.center, 15);//将地图中心设定在搜索结果
                            map.addOverlay(new BMap.Marker(th.center));//添加标注
                            th.objAddress.latitude = th.center.lat; //将查询到地址的经纬度封装到地址对象传回后台
                            th.objAddress.longitude = th.center.lng;
                        }

                        var local = new BMap.LocalSearch(map, { //智能搜索地图展示：完成地图页面的同步展示
                            onSearchComplete: myFun
                        });
                        local.search(myValue);
                    }
                })
            },

            showMap(mapContainer) {
                this.resetForm();
                axios.get("/address/findAll.do")
                    .then((res) => {
                        if (res.data.flag) {
                            //后台地址对象集合封装到allData中
                            this.allData = res.data.data;
                            var th = this;//获取当前Vue当前对象
                            this.$nextTick(function () {
                                // 创建Map实例对象
                                var map = new BMap.Map(mapContainer);
                                var point;
                                //使用jequery中集合遍历方法，遍历后台集合数据获取单个地址对象
                                $.each(th.allData, function (n, value) {
                                    // 初始化地图,设置中心点坐标，中心点设置后会
                                    point = new BMap.Point(value.lng, value.lat);
                                    var marker = new BMap.Marker(point); //创建地标对象
                                    //创建地标的标签对象
                                    var label = new BMap.Label(value.address, {"offset": new BMap.Size(10, -20)});
                                    marker.setLabel(label);//给地标添加标签
                                    map.addOverlay(marker);//给地图添加地标
                                });
                                map.centerAndZoom(point, 15);//初始化地图显示中心点并指定地图放大尺寸
                                map.enableScrollWheelZoom();//允许滚轮缩放地图
                            })
                        }
                    })
                    .catch((err) => {
                        this.$message({
                            showClose: true,
                            type: "error",
                            message: "获取位置信息失败！"
                        })
                        console.log(err);
                    })

            },


        },
        mounted() {
            this.checkActiveName();
        }
    })
</script>

<style>
    #suggestId {
        width: 300px;
        /*size: A3;*/
        height: 31px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 0px;
        margin: 6px;
    }
</style>
<style scoped>
    #allmap {
        width: 98%;
        height: 400px;
        font-family: "微软雅黑";
        border: 1px solid green;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 10px;
    }

    #allmap2 {
        width: 99%;
        height: 400px;
        font-family: "微软雅黑";
        border: 1px solid green;
        margin: 5px;
    }

    .tangram-suggestion-main {
        position: absolute;
        z-index: 12345;
        left: 542px;
        top: 128px;
        width: 300px;
    }

</style>


</body>
</html>